<script setup lang="ts">
// setup在此位置  <script setup>语法糖
// 不用写return 直接定义就能拿到数据
import { reactive, ref } from 'vue'

let num:number=10;

  function getNum(){
    console.log(num)
  }

function changeNum(){
  console.log('修改num')
  num++
  console.log(num)  //页面上不会实现动态的更新
}

// let name:string='张三'
//(1) ref实现响应式数据  let 定义的变量 = ref<数据类型>(变量的值)
// 一般用来定义基本数据类型，引用数据类型也可以定义
let name = ref<string>('张三')

function changeName(){
  console.log('changeName')
  console.log(name)
  //获取时用.value
  console.log(name.value)
  name.value='李四'
}

//interface 定义类型
interface ObjType{
    name:string,
    age:number
}
let obj=ref<ObjType>({
    name:'王五',
    age:18
})
function changeObj(){
    console.log(obj.value)
    console.log(obj.value.age)
    obj.value.age++
}

//[{},{}]
interface ObjType1{
    id:number,
    title:string
}
let obj1=ref<ObjType1[]>([{id:1,title:'1'},{id:2,title:'2'},{id:3,title:'3'}]);
//不用ref声明的写法
//let obj1:ObjType1[]=[{id:1,title:'1'},{id:2,title:'2'},{id:3,title:'3'}]

//(2) reactive 声明响应式的引用数据类型,且只能声明引用数据类型，不能声明基本数据类型
// 获取不用.value
// 响应式转换是深层的，会影响对象内部所有嵌套的属性
interface ObjType2{
  sex:string,
  age:number
}
// let obj2:ObjType2={
//   sex:'男',
//   age:20
// }
let obj2=reactive<ObjType2>({
    sex:'男',
    age:20
})
function changeObj2(){
  console.log(obj2)
  obj2.age++
}
</script>

<template>
  index2
  {{num}}
  <button @click="getNum">点击</button>
  <button @click="changeNum">修改</button>

  <div class="box1">
    <div class="box2"></div>
  </div>

  {{name}}
  <button @click="changeName">changeName</button>

  {{obj.age}}
  <button @click="changeObj">changeObj</button>

  {{obj2.age}}
  <button @click="changeObj2">changeObj2</button>
</template>

<style scoped lang="less">
//less里声明一个变量用@
@color:blue;
.box1{
  width: 300px;
  height: 200px;
  background-color: @color;
}
.box2{
  width: 200px;
  height: 100px;
  background-color: dodgerblue;
}

</style>
